<template>
    <div class="flash">
        <div class="bag">
            <div class="img">
                <img src="../../../../../assets/01背包/bag.jpg" alt="">
            </div>
            <div class="text">背包容量：{{ bagV }}</div>
            <div class="text">剩余容量：{{ bagL }}</div>
            <div class="text">总共价值：{{ bagP }}</div>
            <el-button plain @click="open">设置背包容量</el-button>
        </div>
        <el-tag type="info">最大价值是：{{ maxP }}</el-tag>
        <div class="objects">
            <div v-for="(item, index) in objects" :key="index">
                <div class="object">
                    <div class="img">
                        <img src="../../../../../assets/01背包/object.jpg" alt="">
                    </div>
                    <div class="text">体积：{{ item.v }}</div>
                    <div class="text">价值：{{ item.p }}</div>
                    <el-button @click="handleClick(item)">{{ item.text }}</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'

let bagV = ref(0);
let bagL = ref(0);
let bagP = ref(0);
let maxP = ref(0);
let objectP = ref(0);
let objectNum = ref(0);
let objects = ref([
    {
        v: 8,
        p: 9,
        text: "放入背包",
    },
    {
        v: 3,
        p: 3,
        text: "放入背包",
    },
    {
        v: 4,
        p: 4,
        text: "放入背包",
    },
    {
        v: 2,
        p: 3,
        text: "放入背包",
    },
    {
        v: 6,
        p: 7,
        text: "放入背包",
    },
    {
        v: 5,
        p: 2,
        text: "放入背包",
    },
    {
        v: 1,
        p: 3,
        text: "放入背包",
    },
]);
// 求01背包解
const tList = [8, 3, 4, 2, 6, 5, 1]  // 物品体积
const vList = [9, 3, 4, 3, 7, 2, 3] // 物品价值
const map = {}
function getbag(i, v) {
    if (i === 0) {
        if (tList[0] > v) {
            return 0
        } else {
            return vList[0]
        }
    }
    if (v >= tList[i]) {
        // 放与不放 取最大值
        return Math.max(getbag(i - 1, v), vList[i] + getbag(i - 1, v - tList[i]))
    } else {
        return getbag(i - 1, v)
    }
}
console.log(getbag(7, 20))

// 设置背包容量
const open = () => {
    ElMessageBox.prompt('请输入背包容量', '设置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:
            /[\w!#$%&'*+/=?^_`{|}~-]/,
        inputErrorMessage: '请输入背包容量',
    })
        .then(({ value }) => {
            bagV.value = value;
            bagL.value = value;
            bagP.value = 0;
            maxP.value = getbag(7, value);
            objects.value.forEach(item => {
                item.text = "放入背包";
            })
            ElMessage({
                type: 'success',
                message: `设置背包容量为:${value}`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '返回演示',
            })
        })
}

// 放入背包/取出物品
const handleClick = (item) => {
    if (item.text === "放入背包") {
        if (bagL.value - item.v < 0) {
            ElMessage({
                type: 'warning',
                message: '已经超出背包容量',
            })
        } else {
            item.text = "取出物品";
            bagL.value = bagL.value - item.v;
            bagP.value = bagP.value + item.p;
            if (bagP.value === getbag(7, bagV.value)) {
                ElMessage({
                    type: 'success',
                    message: `恭喜你找到了最大价值`,
                })
            }
        }
    } else {
        item.text = "放入背包";
        bagL.value = bagL.value + item.v;
        bagP.value = bagP.value - item.p;
    }
}
</script>

<style scoped lang="scss">
.flash {
    display: flex;
    justify-content: space-between;
    height: 300px;

    .bag {
        display: flex;
        flex-direction: column;
        height: 200px;
        align-items: center;

        .text {
            text-align: center;
        }

        .img {
            width: 150px;
            height: 150px;

            img {
                width: 150px;
                height: 150px;
            }
        }
    }

    .objects {
        display: flex;
        flex-wrap: wrap;

        .object {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 200px;

            .text {
                text-align: center;
            }

            .img {
                width: 70px;
                height: 70px;

                img {
                    width: 70px;
                    height: 70px;
                }
            }
        }
    }
}
</style>